<template>
  <div class="continue">
    <div class="left-panel">
      <div class="search-wrapper">
        <div class="input-wrapper">
          <i class="iconfont chat-search"></i>
          <input v-model="keywords" :placeholder="searchPlaceholder"/>
        </div>
        <div v-if="!findUserStatus" class="add-wrapper" @click="searchUser('add')">
          <i class="iconfont chat-adduser"></i>
        </div>
        <div class="cancel" v-else @click="searchUser('add')">取消</div>
      </div>
      <div class="message-wrapper">
        <template v-if="findUserStatus">
          <div class="message-item search-item active"
               @click.stop="showAddUserTool"
               data-prevent="y"
               v-if="keywords.length > 0">
            <div class="avatar">
              <i class="iconfont chat-adduser"></i>
            </div>
            <div class="content">
              <div class="head">
                <div class="nickname">查找网络手机/QQ号</div>
                <i class="iconfont chat-right"></i>
              </div>
            </div>
            <addUserTool ref="addUserToolRef" class="add-user-tool"/>
          </div>
        </template>

        <template v-if="!findUserStatus">
          <div class="message-item active">
            <div class="avatar">
              <img src="@/assets/images/avatar.jpg">
            </div>
            <div class="content">
              <div class="head">
                <div class="nickname">干干</div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="right-panel">
      <div class="head-wrapper">
        <div class="tools">
          <div class="menu-list">
            <i class="iconfont chat-pushpin"></i>
            <i class="iconfont chat-minus"></i>
            <i class="iconfont chat-border"></i>
            <i class="iconfont chat-close"></i>
          </div>
        </div>
      </div>
      <div class="msg-content-wrapper">
        <div class="userinfo-wrapper">
          <div class="item">
            <div class="info">
              <div class="avatar">
                <img src="@/assets/images/avatar.jpg" alt="">
              </div>
              <div class="content">
                <div class="head">
                  <div class="username">干干</div>
                  <i class="iconfont chat-ellipsis"
                     data-prevent="y"
                     @click="userToolsStatus.changeStatus()"
                  ></i>
                  <userTools v-if="userToolsStatus.status" class="user-tools"/>
                </div>
                <div class="tips">昵称：用户昵称</div>
                <div class="tips">微信号：dengbaofw</div>
                <div class="tips">地区：安道尔</div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="explain-wrapper">
              <div class="key">备注</div>
              <div class="val">登报服务</div>
            </div>
            <div class="explain-wrapper">
              <div class="key">朋友权限</div>
              <div class="val">仅聊天</div>
            </div>
          </div>
          <div class="item">
            <div class="explain-wrapper">
              <div class="key">备注</div>
              <div class="val">登报服务</div>
            </div>
            <div class="explain-wrapper">
              <div class="key">来源</div>
              <div class="val">通过搜索手机号添加</div>
            </div>
          </div>
        </div>

        <div class="send-tools">
          <div class="item">
            <i class="iconfont chat-message"></i>
            <div class="text">发消息</div>
          </div>
          <div class="item">
            <i class="iconfont chat-phone"></i>
            <div class="text">语音聊天</div>
          </div>
          <div class="item">
            <i class="iconfont chat-video"></i>
            <div class="text">视频聊天</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import userTools from '@/components/friends/userTools.vue';
import addUserTool from '@/components/friends/addUserTool.vue';

//引入用户工具通讯组件
import {useUserToolsStatusStore} from '@/stores/userToolsStatus.ts';
import {ref} from "vue";

let userToolsStatus = useUserToolsStatusStore();

//搜索placeholder
let searchPlaceholder = ref('搜索');
let findUserStatus = ref(false)
let keywords = ref("")
let addUserToolRef = ref(null)

/**
 * 搜索用户
 * @param flag
 */
function searchUser(flag) {
  if (flag === 'add') {
    keywords.value = '';
    if (findUserStatus.value) {
      //取消搜索
      searchPlaceholder.value = '搜索';
      findUserStatus.value = false;
      return;
    }
    //搜索
    searchPlaceholder.value = '微信号/手机号';
    findUserStatus.value = true;
    return;
  }
}

//展示添加用户组件
function showAddUserTool() {
  addUserToolRef.value.showTool({user: 123456});
}
</script>


<style scoped lang="scss">

.continue {
  display: flex;
  width: 100%;
  height: 100%;
}

.left-panel {
  width: 240px;
  background: #eee;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ccc;

  .search-wrapper {
    padding: 18px 8px 8px;
    background: #ddd;
    display: flex;

    .iconfont {
      font-size: 16px;
    }

    .input-wrapper {
      display: flex;
      flex: 1;
      margin-right: 8px;
      align-items: center;
      height: 24px;
      padding: 0 4px;
      border-radius: 4px;

      input {
        border: none;
        outline: none;
        line-height: 16px;
      }

      background: #fff;
    }

    .add-wrapper {
      background: #fff;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .cancel {
      font-size: 12px;
      white-space: nowrap;
      height: 24px;
      line-height: 24px;
      cursor: pointer;
    }
  }

  .message-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;

    .message-item {
      display: flex;
      padding: 8px;
      width: 100%;
      cursor: pointer;

      .avatar {
        width: 40px;
        height: 40px;
        margin-right: 8px;
        font-size: 0;

        img {
          width: 100%;
        }
      }

      .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;

        .head {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          align-items: center;
          .nickname {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .message-item:hover {
      background: #e1e1e1;
    }

    .active {
      background: #ccc;
    }

    .search-item {
      position: relative;

      .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #07c160;
        color: #fff;
        border-radius: 5px;


        .iconfont {
          font-size: 24px;
        }
      }

      .add-user-tool {
        position: absolute;
        top: 0;
        right: -300px;
        z-index: 1;
      }
    }
  }
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #eee;

  .head-wrapper {
    height: 50px;
    padding: 0 4px 0 20px;
    display: flex;
    justify-content: right;

    .tools {
      display: flex;
      flex-direction: column;
      padding: 4px;

      .menu-list {
        display: flex;
        column-gap: 8px;

        .iconfont {
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
  }

  .msg-content-wrapper {
    flex: 1;
    padding: 8px 16px;
    gap: 8px;
    display: flex;
    flex-direction: column;
    font-size: 16px;

    .userinfo-wrapper {
      margin-top: 100px;

      .item {
        //display: flex;
        padding: 16px 0;
        border-bottom: 1px solid #dbdbdb;

        .info {
          display: flex;
          width: 100%;

          .avatar {
            width: 70px;
            height: 70px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 16px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .content {
            flex: 1;

            .head {
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative;

              .nickname {
                font-weight: bold;
                line-height: 24px;
              }

              .iconfont {
                color: #aaa;
                font-size: 20px;
                cursor: pointer;
                border-radius: 2px;
              }
              .iconfont:hover{
                background: #ccc;
              }

              .user-tools {
                position: absolute;
                right: 10px;
                top: 20px;
              }
            }
          }

          .tips {
            font-size: 12px;
            color: #aaa;
            line-height: 20px;
          }
        }

        .explain-wrapper {
          display: flex;
          font-size: 14px;
          line-height: 24px;

          .key {
            width: 70px;
            margin-right: 16px;
            color: #aaa;
          }
        }
      }
    }

    .send-tools {
      display: flex;
      margin-top: 32px;
      gap: 50px;
      justify-content: center;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #8095dd;
        cursor: pointer;

        .iconfont {
          font-size: 24px;
          line-height: 24px;
        }

        .text {
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
  }
}
</style>